<template>
  <div class="trend-dialog">
    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      width="60%"
      :close-on-click-modal="false"
      :before-close="handleClose">
      <el-button-group>
        <el-button :class="{active:activeTime=='1'}" @click="checkTime('1')">所选月份</el-button>
        <el-button :class="{active:activeTime=='2'}" @click="checkTime('2')">近一年</el-button>
        <el-button :class="{active:activeTime=='3'}" @click="checkTime('3')">近三年</el-button>
      </el-button-group>
      <div id="trend-chart">

      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogClose">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  props:['dialogTitle'],
  data() {
    return {
      dialogVisible: true,
      activeTime: "1",
      option: {
        tooltip: {
          trigger: 'axis',
          backgroundColor: "rgba(31,45,61,0.75)",
          color: "#fff",
          fontSize: 12,
          borderWidth: 0, //边框宽度设置1
          borderRadius: 4,
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          },
          // formatter: function(item) {
          //   console.log("---",item);
          // }
        },
        grid: {
          left: '3%',
          right: '3%',
          bottom: '8%',
          containLabel: true
        },
        legend: {
          itemWidth: 13,
          itemHeight: 8,
          x:'center',
          y: 'bottom',
          data: ['医疗费用', '基金支出', '次均个人自负']
        },
        xAxis: [
          {
            type: 'category',
            axisPointer: {
              type: 'shadow'
            },
            axisLine: {
              lineStyle: {
                type: 'solid',
                color: '#DCDFE6',//左边线的颜色
                width:'1'//坐标线的宽度
              }
            },
            axisLabel: {
              color: '#909399',
            },
            data: ['10/01', '10/03', '10/05', '10/07', '10/09', '10/11', '10/13', '10/13', '10/13', '10/13', '10/13', '10/13'],
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '金额(万元)',
            // min: 0,
            // max: 250,
            // interval: 50,
            nameTextStyle:{
              color:"#909399", 
              fontSize:12,  
              padding:12
            },
            axisLabel: {
              color: '#909399',
              // formatter: '{value} ml'
            },
            splitLine: {
              show: true,
              lineStyle: {
                type: 'dashed'
              }
            },
          },
          {
            type: 'value',
            name: '金额(元)',
            // min: 0,
            // max: 25,
            // interval: 5,
            nameTextStyle:{
              color:"#909399", 
              fontSize:12,  
              padding:12
            },
            axisLabel: {
              color: '#909399',
              // formatter: '{value} °C'
            },
            splitLine: {
              show: true,
              lineStyle: {
                type: 'dashed'
              }
            },
          }
        ],
        series: [
          {
            name: '医疗费用',
            type: 'bar',
            barWidth: 10,
            yAxisIndex: 0,
            itemStyle: {
              barBorderRadius: 7,
              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                offset: 0,
                color: "#4188F3" // 0% 处的颜色
              },{
                offset: 1,
                color: "#64B9FF" // 100% 处的颜色
              }], false)
            },
            data: [
              2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 75.6, 72.2, 32.6, 75.6, 65.6, 65.6
            ]
          },
          {
            name: '基金支出',
            type: 'bar',
            barWidth: 10,
            yAxisIndex: 0,
            itemStyle: {
              barBorderRadius: 7,
              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                offset: 0,
                color: "#F76B1C" // 0% 处的颜色
              },{
                offset: 1,
                color: "#FAD961" // 100% 处的颜色
              }], false)
            },
            data: [
              2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 75.6, 82.2, 72.2, 82.2, 72.2,82.2
            ]
          },
          {
            name: '次均个人自负',
            type: 'line',
            yAxisIndex: 1,
            itemStyle: {
              color: "#21D5E6",
            },
            lineStyle:{
              width:2, //设置线条粗细
              shadowColor: 'rgba(33,213,230,0.20)',
              shadowBlur: 10,
              shadowOffsetY: 10
            },
            emphasis: {
              lineStyle: {
                width: 2,
              }
            },
            data: [7.0, 7.2, 9.3, 14.5, 16.3, 10.2, 20.3, 13.4, 13.0, 16.5, 12.0, 6.2]
          }
        ]
      },
    }
  },
  mounted() {
    this.$nextTick(()=>{
      this.chart = echarts.init(document.getElementById("trend-chart"));
      this.chart.setOption(this.option);
    });
    this.yAxisEqual();
    window.addEventListener("resize", () => {
      this.chart.resize();
    });
  },
  methods: {
    checkTime(val) {
      console.log(val);
      this.activeTime = val;
    },
    handleClose(done) {
      this.$emit("dialogClose",true);
      done();
    },
    dialogClose() {
      this.$emit("dialogClose",true)
    },
    // y轴上的刻度线对其（指定共同只显示5个刻度值）
    yAxisEqual() {
      this.option.yAxis[0].max = Math.ceil(Math.max.apply(null, this.option.series[0].data) / 5) * 5;
      this.option.yAxis[0].interval = Math.ceil(Math.max.apply(null, this.option.series[0].data) / 5);
      this.option.yAxis[1].max = Math.ceil(Math.max.apply(null, this.option.series[2].data) / 5) * 5;
      this.option.yAxis[1].interval = Math.ceil(Math.max.apply(null, this.option.series[2].data) / 5);
      this.option.yAxis[0].min = 0;
      this.option.yAxis[1].min = 0;
    }
  }
}
</script>

<style lang="less" scoped>
  .trend-dialog {
    ::v-deep .el-dialog {
      height: 65vh;
      .el-dialog__title {
        height: 14px;
        line-height: 14px;
        font-family: "PingFangSC-Semibold";
        font-size: 16px;
        color: #303133;
        font-weight: bold;
        &::before {
          content: "";
          width: 4px;
          height: 14px;
          background: #0160c0;
          float: left;
          margin-top: 1px;
        }
      }
      .el-dialog__body {
        height: 80%;
        padding: 10px 16px 16px 20px;
        .el-button-group {
          .el-button {
            width: 62px;
            height: 32px;
            background: #fff;
            color: #303133;
            font-size: 12px;
          }
          .el-button.active {
            width: 78px;
            height: 32px;
            background: #0160C0;
            border: 1px solid #0160C0;
            color: #fff;
          }
        }
        #trend-chart {
          width: 100%;
          height: 95%;
        }
      }
      .el-dialog__footer {
        overflow: hidden;
        padding: 16px;
        background: #fff;
        .el-button {
          float: right;
          margin-right: 0;
        }
      }
    }
  }
</style>